<template>
  <div :class="prefixCls" class="notify">
    <Popover trigger="click" :overlayClassName="`${prefixCls}__overlay`" v-model:visible="visible">
      <Badge :count="count" dot :numberStyle="numberStyle">
        <BellOutlined />
      </Badge>

      <template #title>
        <div class="notify-header">
          <div class="title">全部通知</div>
          <div class="buttons">
            <Popover trigger="click">
              <template #content>
                <div style="width: 180px; padding: 20px 16px">
                  <div
                    @click="() => setRead()"
                    style="color: #999; cursor: pointer; font-size: 14px"
                    ><img
                      :src="confirmImg"
                      style="display: inline-block; margin: -4px 5px 0px 0px"
                      width="17"
                      height="17"
                    />标记所有为已读</div
                  >

                  <div
                    @click="() => handleDelete()"
                    style="color: #999; cursor: pointer; margin-top: 12px; font-size: 14px"
                    ><img
                      :src="deleteImg"
                      style="display: inline-block; margin: -4px 5px 0px 0px"
                      width="17"
                      height="17"
                    />删除所有为已读消息</div
                  >
                </div>
              </template>
              <div class="btn">
                <img :src="optImg" width="16" height="16" />
              </div>
            </Popover>

            <div class="btn" @click="hide">
              <img :src="closeImg" width="16" height="16" />
            </div>
          </div>
        </div>
      </template>
      <template #content>
        <div class="notify-container">
          <div class="notify-item" v-for="item in list" :key="item.install_pending_id">
            <img class="letter-img" :src="item.read == 0 ? letterImg : letterReadImg" />
            <div class="content" @click="onNoticeClick(item)">
              <div class="title">{{ item.title }}</div>
              <div class="desc">{{ item.content }}</div>
            </div>
            <div class="opt-btns">
              <div class="btn" v-if="item.read == 0" @click="setRead(item)">
                <img :src="confirmImg" width="17" title="标记为已读" />
              </div>
              <div class="btn" @click="handleDelete(item)">
                <img :src="closeImg" width="17" title="删除" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </Popover>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { Popover, Badge } from 'ant-design-vue';
  import { BellOutlined } from '@ant-design/icons-vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import optImg from '/@/assets/images/shezhi.png';
  import {
    getCountApi,
    getList,
    deleteApi,
    setReadApi,
    completeTaskGetApi,
  } from '/@/api/notify/notify';
  import closeImg from '/@/assets/images/guanbi.png';
  import deleteImg from '/@/assets/images/shanchu.png';
  import confirmImg from '/@/assets/images/gou.png';
  import letterImg from '/@/assets/images/youjian.png';
  import letterReadImg from '/@/assets/images/youjian-read.png';
  export default defineComponent({
    components: { Popover, BellOutlined, Badge },
    setup() {
      const { prefixCls } = useDesign('header-notify');
      const count = ref(0);
      const list = ref([]);
      const visible = ref<boolean>(false);
      function hide() {
        visible.value = false;
      }
      function handleDelete(item?:any) {
        const params = item ? { id: item.install_pending_id, all: false } : { all: true };
        deleteApi(params).then((res) => {
          console.log(res);
          getListFn();
        });
      }
      function setRead(item?:any) {
        const params = item ? { id: item.install_pending_id, all: false } : { all: true };
        setReadApi(params).then(() => {
          getListFn();
        });
      }
      async function onNoticeClick(item) {
        const { inst_id } = item;
        const r = await completeTaskGetApi(inst_id);
        r.code === 0 && window.open(r.data);
      }
      function getCount() {
        getCountApi().then((res) => {
          count.value = Number(res.data);
        });
      }

      function getListFn() {
        getList().then((res) => {
          list.value = res.data ?? [];
        });
      }
      getListFn();
      getCount();
      setInterval(() => {
        getListFn();
        getCount();
      }, 300000);
      return {
        prefixCls,
        onNoticeClick,
        numberStyle: {},
        count,
        optImg,
        closeImg,
        confirmImg,
        deleteImg,
        letterImg,
        letterReadImg,
        list,
        visible,
        hide,
        handleDelete,
        setRead,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-header-notify';
  .ant-popover-inner-content {
    padding: 0;
  }
  .@{prefix-cls} {
    padding-top: 2px;

    &__overlay {
      max-width: 360px;
    }

    .ant-tabs-content {
      width: 300px;
    }

    .ant-badge {
      font-size: 18px;

      .ant-badge-multiple-words {
        padding: 0 4px;
      }

      svg {
        width: 0.9em;
      }
    }
  }
  .notify {
    .header-popover-item {
      img {
        display: inline-block;
      }
    }
  }
</style>

<style lang="less" scoped>
  .notify-container {
    width: 360px;
    height: 450px;
    overflow-y: auto;
    .notify-item {
      display: flex;
      align-items: flex-start;
      margin: 0 17px 0 20px;
      padding: 20px 0 19px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      .letter-img {
        width: 20px;
        margin-right: 10px;
        margin-top: 4px;
      }
      .content {
        flex: 1;
        cursor: pointer;
        .title {
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
        }
        .desc {
          color: rgba(153, 153, 153, 1);
          font-size: 12px;
          margin-top: 8px;
        }
      }
      .opt-btns {
        .btn {
          display: inline-block;
          cursor: pointer;
          &:nth-child(2) {
            position: relative;
            top: 2px;
            margin-left: 5px;
          }
        }
      }
    }
  }
  .notify-header {
    display: flex;
    height: 47px;
    width: 100%;
    align-items: center;
    .title {
      width: 0;
      flex: 1;
      font-size: 14px;
      color: #333;
    }
    .buttons {
      .btn {
        cursor: pointer;
        display: inline-block;
        margin-left: 7px;
      }
    }
  }
</style>
